import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
import { defineComponent, onMounted, PropType, ref } from 'vue';
import { IDEChart } from '@ibiz/model-core';
import { ChartController } from './chart.controller';
import './chart.scss';

const ChartControl = defineComponent({
  name: 'IBizChartControl',
  props: {
    modelData: { type: Object as PropType<IDEChart>, required: true },
    context: { type: Object as PropType<IContext>, required: true },
    params: { type: Object as PropType<IParams>, default: () => ({}) },
  },
  setup() {
    const c = useControlController((...args) => new ChartController(...args));
    const ns = useNamespace(`control-${c.model.controlType!.toLowerCase()}`);
    const chartRef = ref();

    onMounted(() => {
      c.initChart(chartRef.value);
    });

    return {
      c,
      ns,
      chartRef,
    };
  },
  render() {
    return (
      <iBizControlBase controller={this.c}>
        <div ref='chartRef' class={this.ns.e('chart')}>
          图表
        </div>
      </iBizControlBase>
    );
  },
});

export default ChartControl;
